<template>
  <div class="footer">
    <div class="footer-inner">
      <div class="footer-tips">每日一句</div>
      <div class="footer-content">你不知道你是你，你就是你</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Footer'
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.footer {
  border-top: 1px solid #eaecef;
  &-inner {
    position: relative;
    margin-left: 350px;
    max-width: 1200px;
    padding: 10px;
  }
  &-tips {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 46px;
    color: #909399;
    letter-spacing: 6px;
  }
  &-content {
    line-height: 42px;
    text-align: right;
  }
}
@media (max-width: 719px) {
  .footer-inner {
    margin-left: 0;
  }
}

</style>
